<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>JS 事件</h1>
    <hr>
    <button onclick="alert('啊, 好疼')" id="dd">点我啊</button>
    <button id="btn">咬我啊</button>
    <button id="btn1">叫我啊</button>
    <br>
    <br>
    <button id="remove">解绑事件</button>
    <hr>
    <button id="jt">点击(监听)</button>
    
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            alert('哎,不要~~~');
        }

        function demo() {
            alert('嘿,孙子!');
        }
        var btn1 = document.getElementById('btn1');
        btn1.onclick = demo;

        // 事件监听
        var jt = document.getElementById('jt');

        // 浏览器 方法或属性是可用
        if (jt.addEventListener) {
            jt.addEventListener('click', fun1, false);
            jt.addEventListener('click', function () {
                alert('啊,你又监听我!');
            }, false);
        } else {
            // IE 8
            jt.attachEvent('onclick', function () {
                alert('啊,你又监听我!');
            });
            jt.attachEvent('onclick', fun1);
        }

        function fun1() {
            alert('啊,你监听我!');
        }

        var remove = document.getElementById('remove');
        remove.onclick = function () {
            // console.log(dd);
            dd.onclick = function (){}
            btn.onclick = null;
            btn1.onclick = null;

            // jt.onclick = null; // NO
            // 事件监听的解绑方式
            // jt.removeEventListener('click', fun1, false);
            jt.detachEvent('onclick', fun1);
        }
    </script>
</body>
</html>